<!--
  *@Description : 发布摄影组件,单张不能超过2m，不能超过20张，因为服务器带宽问题，太大容易出现性能问题
  *@author 萧红
  *@date 2020-04-30 10:12
 * @LastEditTime: 2023-03-21 13:15:09
  *@LastEdititors
-->
<template>
  <div id="addPhotograph">
    <add-top :title="'发摄影'" @commit="add"></add-top>
    <div :style="{height: $inerHeight + 'px'}">
        <cube-scroll :data="[]" ref="scroll" :style="{height:$inerHeight + 55 - 35+'px'}">
          <cube-textarea class="content" v-model="content" :maxlength="100" :placeholder="'      每一个不cos的日子，都是对生活的不尊重   '"></cube-textarea>
          <cube-input placeholder="      请指出一下辛苦的摄影师吧(*^▽^*)      " :maxlength="10" :clearable="true" v-model="photographer">
            <span slot="prepend" class="pre">摄影:</span>
          </cube-input>
          <cube-input placeholder="      请指出一下cos品牌吧(*^▽^*)      " :maxlength="10" :clearable="true" v-model="clothing">
            <span slot="prepend" class="pre">服装:</span>
          </cube-input>
          <cube-input placeholder="      请说明一下主题吧(*^▽^*)      " :maxlength="10" :clearable="true" v-model="theme">
            <span slot="prepend" class="pre">主题:</span>
          </cube-input>
          <div class="display-guangchang">
            <cube-checkbox v-model="isShowInGuangChang">
              动态显示在广场
            </cube-checkbox>
          </div>
          <div class="tips">温馨提示：单张图片不能超过3M</div>
          <div class="upload">
            <!--action="http://112.126.100.206/uploadFile"-->
            <!--action="http://localhost/uploadFile"-->
            <cube-upload
              ref="upload"
              action="http://112.126.100.206/uploadFile"
              :simultaneous-uploads="4"
              @files-added="filesAdded"
              :max = "20"
            />
            <!--<input type="file" class="file" ref="upload" multiple @change="handleGetFile">-->
          </div>
        </cube-scroll>
    </div>
  </div>
</template>

<script>
import AddTop from '../../components/AddTop'
export default {
  name: 'AddPhotograph',
  components: {AddTop},
  data () {
    return {
      content: '',
      photographer: '', // 摄影师
      clothing: '', // 服装
      theme: '', // 摄影主题
      isShowInGuangChang: true // 是否勾选显示到广场,默认显示
    }
  },
  computed: {
    labels () {
      return this.photographer + ';' + this.clothing + ';' + this.theme
    }
  },
  methods: {
    add () {
      this.files = this.$refs.upload.files
      if (this.content !== '' && this.files.length > 0) {
        this.$toast('正在发布', 'loading', 30000)
        let formData = new FormData()
        // 将图片文件分别放入formData对象
        for (let i = 0; i < this.files.length; i++) {
          formData.append('file[]', this.files[i].file)
        }
        let userid = localStorage.getItem('userId')
        formData.append('userId', userid)
        formData.append('content', this.content)
        formData.append('showGuangChang', this.isShowInGuangChang)
        formData.append('add', 'true')
        formData.append('type', 'photograph')
        formData.append('labels', this.labels)
        let url = '/uploadFile'
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        // console.log(this.files)
        this.$post(url, formData, config).then((res) => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct', 500)
            setTimeout(() => {
              this.toNewPage('/home')
            }, 500)
          } else {
            this.$toast(res.msg, 'warn', 1000)
          }
        })
      } else {
        this.$toast('分享摄影并描述一下吧', 'warn')
        return false
      }
    },
    filesAdded (files) {
      // 只能上传图片格式jpeg，png，jpg
      let hasIgnore = false
      // 允许上传的文件格式
      let formart = ['image/jpeg', 'image/png', 'image/jpg']
      const maxSize = 3 * 1024 * 1024 // 3M
      // const maxSize = 2 * 1024 * 10240000 // 1M
      for (let k in files) {
        const file = files[k]
        if (typeof file === 'object') {
          if (!formart.includes(file.type)) {
            file.ignore = true
            this.$toast('上传的不是允许的图片文件(jpg,jpeg,png)', 'warn', 1000)
            return false
          } else if (file.size > maxSize) {
            this.$toast('单张图片不能超过3M', 'warn', 1000)
            file.ignore = true
            hasIgnore = true
          }
        }
      }
      hasIgnore && this.$createToast({
        type: 'warn',
        time: 1000,
        txt: '单张图片不能超过3M'
      }).show()
    }
  }
}
</script>

<style scoped lang="stylus">
@import "../../../node_modules/stylus-px2rem"
#addPhotograph
{
  position relative
  .content
  {
    height 35px
  }
  .pre
  {
    padding 0px 5px
  }
  .display-guangchang
  {
    width 100%;
    position relative
    padding 5px 0px
    border-bottom 1px solid #f0f0f0
  }
  .upload
  {
    width: 100%;
    display flex
    flex-flow row wrap
    justify-content flex-start
    position relative
    margin-top: 5px
    & > div
    {
      margin 0px 1%
      i
      {font-size:35px}
    }
  }
  .tips{
    padding 0 5px
    text-align left
    color: #f56c6c;
  }
  .bottom
  {
    width: 100%
    position absolute
    height: 15px
    line-height 15px
    bottom 0
    display flex
    justify-content flex-start
    span
    {
      padding 0px 2px
      margin 0px 2px
    }
  }
}
</style>
